<template>
  <div class="page" style="">
    <div class="print_title">开票申请详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposer_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.proposerDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >销售方单位:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.sellerUnit_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >经营团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamId_dictText?formData.teamId_dictText:formData.teamId }}</p>
          </a-col>
        </a-row>
      </a-col>

      <!-- 迭代16.7隐藏主表项目承接人 -->
      <!-- <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >项目承接人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.undertaker_dictText }}</p>
          </a-col>
        </a-row>
      </a-col> -->
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >开票人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.invoiceApplicant_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >开票类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.invoiceCategory_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >是否作废:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.isCrossMonthInvalid_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >总开票金额(元):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.invoiceTotalAmount }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12" v-if="formData.isCrossMonthInvalid != 0">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >关联已开票申请单:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.relBillId_dictText?formData.relBillId_dictText:formData.relBillNo }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <p class="title" style="margin-top: 18px;">发票信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="24" v-if="defDataSource && defDataSource.length">
        <a-table
          style="margin-bottom: 9px;"
          :columns="defColumns"
          :data-source="defDataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
      <a-col :span="24" v-if="rateDataSource && rateDataSource.length">
        <p class="title_table">税率信息</p>
        <a-table
          style="margin-bottom: 9px;"
          :columns="rateColumns"
          :data-source="rateDataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >业主单位:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.buyerUnit_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >纳税人识别号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.taxpayerIdNo }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单位地址:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.companyAddress }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单位电话:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.companyTel }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >开户行:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.bankName }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >银行账号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.bankAccountNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >发票备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.invoiceRemark }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >附言:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.postscript }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row type="flex" justify="center" v-if="dataSource && dataSource.length">
      <a-col>
        <p class="title_table">开票信息</p>
      </a-col>
      <a-col :span="24">
        <a-table
          style="margin-bottom: 9px;"
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" title="附件信息" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
import address from '@/components/AddressChoice/address.js'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
export default {
	props: {
		formData: {
			type: Object,
			default: () => {},
			required: true
    },
		formDataHistory: {
			type: Object,
			default: () => {},
			required: true
    }
	},
  components: {
    FileInfor,
    ProcessInfor
  },
  data() {
    return {
      address,
      filterMultiDictText,
      dictOptions: {},
      dataSource: [], // 物料列表
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 45,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '发票号码',
          align: 'center',
          width:70,
          dataIndex: 'invoiceNo'
        },
        {
          title: '开票日期',
          align: 'center',
          width:75,
          dataIndex: 'createTime'
        },
        {
          title: '发票类型',
          align: 'center',
          width:70,
          dataIndex: 'invoiceCategory',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['invoiceCategory'], text + '')
            }
          }
        },
        {
          title: '税率(%)',
          align: 'center',
          width:55,
          dataIndex: 'taxRate_dictText',
        },
        {
          title: '开票金额(元)',
          align: 'center',
          width:75,
          dataIndex: 'invoiceAmount',
        },
        // {
        //   title: '是否收票',
        //   align: 'center',
        //   // width:130,
        //   dataIndex: 'isFree',
        //   customRender: (text) => {
        //     if (!text) {
        //       return ''
        //     } else {
        //       return filterMultiDictText(this.dictOptions['isFree'], text + '')
        //     }
        //   }
        // },
        {
          title: '备注',
          align: 'center',
          width:120,
          dataIndex: 'remark'
        },
        {
            title:'发票附件',
            align:"center",
            dataIndex: 'attachments'
          },
			],

      defColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 45,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '项目名称',
          align: 'center',
          width: 65,
          dataIndex: 'projectId',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['projectId'], text + '')
            }
          }
        },
        {
          title: '项目编号',
          align: 'center',
          dataIndex: 'projectCode',
          width: 65
        },
        {
          title: '业绩归属年度',
          align: 'center',
          dataIndex: 'attributionYear',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              var attributionYear = filterMultiDictText(this.dictOptions['attributionYear'], text + '');
              return attributionYear
            }
          }
        },
        {
          title: '项目承接人',
          align: 'center',
          dataIndex: 'undertaker',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['undertaker'], text + '')
            }
          }
        },
        {
          title: '经营团队',
          align: 'center',
          width: 65,
          dataIndex: 'teamId',
          customRender: (text) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['teamId'], text + '')
            }
          }
        },
        {
          title: '项目合同',
          align: 'center',
          width: 65,
          dataIndex: 'projectContract',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['projectContract'], text + '')
            }
          }
        },
        {
          title: '合同款项',
          align: 'center',
          dataIndex: 'contractFund',
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return filterMultiDictText(this.dictOptions['contractFund'], text + '')
            }
          }
        },
        {
          title: '款项金额(元)',
          align: 'center',
          width: 65,
          dataIndex: 'itemMoney'
        },
        {
          title: '预计回款时间',
          align: 'center',
          width: 90,
          dataIndex: 'estimateRefundTime',
          customRender: function (text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          }
        },
        {
          title: '已开票金额(元)',
          width: 65,
          align: 'center',
          dataIndex: 'onInvoiceAmount'
        },
        {
          title: '开票金额(元)',
          width: 65,
          align: 'center',
          dataIndex: 'invoiceAmount'
        }
      ],
      rateColumns: [
        {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '税率(%)',
            align: 'center',
            dataIndex: 'taxRate_dictText'
          },
          {
            title: '应开票金额(元)',
            align: 'center',
            dataIndex: 'shouldInvoiceAmount'
          },
          {
            title: '已开票金额(元)',
            align: 'center',
            dataIndex: 'onInvoiceAmount'
          },
          {
            title: '本次开票金额(元)',
            align: 'center',
            dataIndex: 'invoiceAmount'
          },
      ],
      defDataSource: [],
      rateDataSource: [],
			dataHistorySource: [], // 流程列表
			url: {
				list: '/api/erp/finance/invoice/erpFinanceInvoiceHandleRecord/list', // 物料明细列表
				allList: '/api/erp/finance/invoice/erpFinanceInvoiceExpensesDetail/allList',
				historyList: '/api/erpmng/act/task/processHistoryList' // 流程历史跟踪接口
			},
			purchaseFile: [] // 附件
    };
  },
	watch: {
		formData: {
			handler (val) {
				if (val) {
					this.list()
					this.getHistoryList()
          this.initDictConfig() // 字典值
					if (val.attachments) {
						this.purchaseFile = val.attachments.split(',')
					}
				}
			},
			immediate: true
		},
		formDataHistory: {
			handler (val) {
				if (val) {
					this.getHistoryList()
				}
			},
			immediate: true
		}
	},
	methods: {
		// 获取列表
		getHistoryList() {
			var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
			getAction(this.url.historyList, params).then(res => {
				if (res.success) {
					this.dataHistorySource = res.result.records || res.result
				}
			})
		},

    async initDictConfig() {
      // 发票类型
      initDictOptions('invoice_type').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'invoiceCategory', res.result)
        }
      })
      // 是否收票
      initDictOptions('YES_OR_NO').then(async(res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'isFree', res.result)
        }
      })
      // 立项项目
      initDictOptions('erp_omc_project,project_name,id').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'projectId', res.result)
          }
        })
        // 费用所属年度
        // initDictOptions('tdnd_type').then((res) => {
        //   if (res.success) {
        //     this.$set(this.dictOptions, 'teamYear', res.result)
        //   }
        // })
        // 经营团队
        initDictOptions('erp_omc_team_manager,alias_name,id').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'teamId', res.result)
          }
        })
        // 团队负责人
        initDictOptions('erp_employee_file,name,id').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'undertaker', res.result)
          }
        })
        // 所属年度
        initDictOptions('yjgsnd').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'attributionYear', res.result)
          }
        })
        // 开票类型
        // initDictOptions('invoice_type').then((res) => {
        //   if (res.success) {
        //     this.$set(this.dictOptions, 'invoiceCategory', res.result)
        //   }
        // })
        // 项目合同
        initDictOptions('erp_omc_contract_manager_final,htmc,id').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'projectContract', res.result)
          }
        })
        // 合同款项
        initDictOptions('erp_progress_payment_node,node_name,id').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'contractFund', res.result)
          }
        })
        // 项目进度
        initDictOptions('erp_progress_contract_node,node_name,id').then(async(res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'projectProgress', res.result)
          }
        })
    },

		list () {
			if (!this.formData.id) {
				return false
			}
			var params = {
        billId: this.formData.id
			}
			getAction(this.url.list, params).then(res => {
				if (res.success) {
						this.dataSource = res.result.records || res.result
						this.dataSource.forEach((item, index) => {
						item.key = index
					})
				}
      })
			getAction(this.url.allList, params).then(res => {
				if (res.success) {
						this.defDataSource = res.result.records || res.result
						this.defDataSource.forEach((item, index) => {
						item.key = index
					})
				}
      })
      getAction('/api/erp/finance/invoice/erpFinanceInvoiceTaxRateRecord/allList', params).then(res => {
				if (res.success) {
						this.rateDataSource = res.result.records || res.result || []
						this.rateDataSource.forEach((item, index) => {
						item.key = index
					})
				}
      })
		},

		tableRowClass(record, index) {
			console.log('record, index', record, index)
			if (index == 0) {
				return 'rowClass';
			}
      return ''
    },

    getAddress (text) {
      if (!text) {
        return false
      }
      var areaList = text.split(',')
      var areaText = ''
      this.address.map(value => {
        if (areaList[0] && areaList[0] == value.code) {
          areaText = areaText + value.name + '/'
          if (value && value.children && value.children.length) {
            value.children.map(val => {
              if (areaList[1] && areaList[1] == val.code) {
                areaText = areaText + val.name + '/'

                if (val && val.children && val.children.length) {
                  val.children.map(va => {
                    if (areaList[2] && areaList[2] == va.code) {
                      areaText = areaText + va.name
                    }
                  })
                }
              }
            })
          }
        }
      })
      return areaText
    }
	}
};
</script>
<style lang="less" scoped>
.page{
	background: #ffffff;
	padding: 19px 28px 0 28px;
	width: 750px;
	.print_title{
		font-size: 15px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 9px;
	}
	.title {
		background: #EEEEEE;
		font-size: 13px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
		padding: 11px 9px;
	}
	.title_table{
		font-size: 13px;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #000000;
	}
}
/deep/ .rowClass{
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-thead th{
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-thead tr{
	background: #EEEEEE;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body {
    margin: 0 0px;
}
/deep/ .ant-table-body tr {
	font-size: 10px;
	font-family: Alibaba PuHuiTi 2.0;
	font-weight: normal;
	color: #000000;
}
/deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
.content {
  font-size: 13px;
}
</style>
